<template>
    <div class="home tophead">
        <div class="top">
            <header>
                小说列表
            </header>
            <div @click="gotosearch">
                <van-search  placeholder="请输入搜索关键词" />
            </div>
        </div>
        <van-tabs @click="changefictionType"  class="a">
            <van-tab v-for="(item,index) in fictionType" :title="item" :key="index">
                <ul class="type">
                    <li v-for="(l,i) in list" :key="i" class="shumi" @click="getZhangJie(l.fictionId)">
                        <div>
                            <img v-lazy="l.cover" alt="">
                        </div>
                        <div class="b">
                            <div>
                            <h5 class="shumi-title">{{l.title}}</h5>
                            <p class="shumi-leixin">
                                <span>{{l.fictionType}}</span>
                                </p>
                            <p class="van-ellipsis shumi-jianjie">简介 : <span v-if="l.descs">{{l.descs}}</span> <span v-else>暂无</span></p>
                            <p style="margin-top: 3px; color:#666666">更新时间 : <span style="color:#b93321">{{(l.updateTime).substring(0,10)}}</span></p>
                            <p style="margin-top: 3px; color:#666666">作者: {{l.author}}</p>
                        </div>
                        </div>
                    </li>
                </ul>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
    data(){
        return{
            value:"",
            type:"title",
            fictionType:["都市","穿越","科幻","网游","玄幻","修真","言情","历史","其他","竞技"],
            list:[],
        }
    },
     methods: {
        gotosearch(){
            this.$router.push({name:"search",query:{title:"fiction"}})
        },
        getZhangJie(fictionId){
            console.log(fictionId)
            this.$router.push(
                {name:"zhangjie",
                query:{fictionId:fictionId}
                    }
                )
        },
        changefictionType(name,title){
            this.list=[],
            this.$ajax.bookstype({
                fictionType:title
            }).then(res=>{
                if(res.code==200){
                    this.list=res.data.data
                }
            })
        }
    },
    mounted(){
        this.$ajax.bookstype({
                fictionType:this.fictionType[0]
            }).then(res=>{
                if(res.code==200){
                    this.list=res.data.data
                }
            })
    }
}
</script>

<style lang="scss" scoped>
.top{
    width: 100%;
    height: 46px;
    background-color: #b83320;
    position: fixed;
    top:0;
    z-index:100;
    header{
        text-align: center;
        font-size: 16px;
        line-height: 46px;
        color: #fff;
        letter-spacing: 5px
    }
}

.type{
    padding: 50px 0;
    height: 100%;
    overflow-y: auto;
    .shumi{
    height: 140px;
    width: 100%;
    padding: 14px;
    border-bottom:1px solid #aaaaaa; 
    display: flex;
    align-items: center;
    img{
        width: 70px;
        height: 90px;
    }
    .b{
        padding-left: 10px;
        width: 80%;
        .shumi-title{
        font-size:14px;
        font-weight: 600;
        color: #b93321;
    }
    .shumi-leixin{
        margin-top: 3px;
        font-size: 12px;
        color: #999999;
    }
    .shumi-jianjie{
        margin-top: 3px;
        font-size: 12px;
        color: #999999;
    }
    }
}
}
::v-deep .van-tabs--line .van-tabs__wrap{
    position: fixed;
    width: 100%;
    top: 98px
}



</style>


